<template>
<view class="grid-top">
	<u-back-top :scroll-top="scrollTop"></u-back-top>
	<u-navbar :is-back="false" title="首页" :background="background">
			<view class="map-wrap" @click="goHome">
				<u-icon  name="home" size="38" ></u-icon>
			</view>
		</u-navbar>
	<!-- <view class="content">the end -->

		<view class="wrap">
			<u-swiper :list="bannerlist"></u-swiper>
		</view>
		<u-notice-bar type="warning" mode="vertical" :list="noticelist"></u-notice-bar>
		<view class="grid-top">
			<u-toast ref="uToast"></u-toast>
		<u-grid :col="col" @click="click" v-if="!isSwiper" :border="border">
					<u-grid-item name="item1" :index="0" @click="itemClick">
						<u-badge count="9" :offset="[col == 3 ? 20 : 14, col == 3 ? 30 : 20]"></u-badge>
						<u-icon name="rmb-circle-fill" :size="46"></u-icon>
						<view class="grid-text">物业费</view>
					</u-grid-item>
					<u-grid-item :index="1">
						<u-icon name="car-fill" :size="46"></u-icon>
						<view class="grid-text">停车费</view>
					</u-grid-item>
					<u-grid-item :index="2">
						<image src="https://cdn.uviewui.com/uview/grid/hot5.png" :style="{
							top: col == 3 ? '14rpx' : '8rpx',
							right: col == 3 ? '40rpx' : '28rpx'
						}" style="width: 34rpx;height: 34rpx;" class="badge-icon" mode="widthFix"></image>
						<u-icon name="edit-pen-fill" :size="46"></u-icon>
						<view class="grid-text">投诉建议</view>
					</u-grid-item>
					<u-grid-item :index="3">
						<u-icon name="man-add-fill" :size="46"></u-icon>
						<view class="grid-text">家庭成员</view>
					</u-grid-item>
					<u-grid-item :index="4">
						<u-icon name="warning-fill" :size="46"></u-icon>
						<view class="grid-text">报修</view>
					</u-grid-item>
					<u-grid-item :index="5">
						<u-icon name="lock-opened-fill" :size="46"></u-icon>
						<view class="grid-text">智慧开门</view>
					</u-grid-item>
					<u-grid-item :index="6">
						<image src="https://cdn.uviewui.com/uview/grid/hot6.png" style="width: 44rpx;height: 44rpx;top:0;right:0;" class="badge-icon"></image>
						<u-icon name="file-text-fill" :size="46"></u-icon>
						<view class="grid-text">公告</view>
					</u-grid-item>
					<u-grid-item :index="7">
						<u-icon name="kefu-ermai" :size="46"></u-icon>
						<view class="grid-text">联系客服</view>
					</u-grid-item>
				</u-grid>
		</view>
		<!-- 中间内容-->
		<view class="wrap">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{ leftList }">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<div @click="gotoprdetail(item.id,item.storeName)">
					<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">{{ item.storeName }}</view>
					<view class="demo-price">{{ item.price }}元</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">自营</view>
						<view class="demo-tag-text">放心购</view>
					</view>
					<view class="demo-shop">{{ item.storeInfo }}</view>
					<view class="u-close">
						<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
					</view>
					</div>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<div @click="gotoprdetail(item.id,item.storeName)">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">{{ item.storeName }}</view>
						<view class="demo-price">{{ item.price }}元</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">自营</view>
							<view class="demo-tag-text">放心购</view>
						</view>
						<view class="demo-shop">{{ item.storeInfo }}</view>
						<view class="u-close">
							<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
						</view>
					</div>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>

		<!-- 中间内容end-->
		<view class="button-demo">
			<u-button :ripple="true" @click="getopenid()">弹出授权框演示</u-button>
		</view>
		<view class="button-demo">
			<u-button :ripple="true" @click="gotomap()">使用地图选择位置</u-button>
		</view>
		<view class="button-demo">
			<u-button :ripple="true" @click="gotabs()">使用tabs</u-button>
		</view>
		<view class="button-demo">
			<u-button :ripple="true" @click="gotoorder()">跳转订单页</u-button>
		</view>
		<view class="link-demo">
			<u-link :color="$u.color['primary']" :under-line="true" href="http://www.uviewui.com">跳转uView文档：www.uviewui.com</u-link>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	<!-- </view> -->
</view>

</template>

<script>

import uIcon from '../../uview-ui/components/u-icon/u-icon.vue'
	export default {
  components: { uIcon },
		data() {
			return {
				title: 'Hello',
				tabbar: '',
				bannerlist: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '今天感冒难受没有更新'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				isSwiper: false,
				current: 0,
				border: true,
				col: 4,
				noticelist: [],
				loadStatus: 'loadmore',
				flowList: [],
				scrollTop: 0,
				page: 1
		
			}
		},
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面，ok
		onShow(){
				
		},
		onLoad() {
			this.addRandomData();
			/**
			 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
			 */
			this.tabbar = this.$store.state.tabbar
			
			
		},
		onReachBottom() {
			//限制最多查询三页
			if(this.page >= 3) return ;
			this.loadStatus = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				this.addRandomData();
			}, 1000)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			addRandomData() {
				let _that=this
					_that.$myRequest('/index_bast',{page:this.page},'GET').then((res) => {
						this.flowList=res.data.bastList
						if(this.flowList.length==0){
							this.loadStatus = 'nomore';
						}
					}).catch((err) => {
						
					});
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			//route
			goHome() {
				// 无参数
				this.$u.route({
					url: 'pages/index/index',
					type: 'tab'
				});
			},
			click(index) {
				this.$refs.uToast.show({
					title: `点击了第${index + 1}宫格`,
					type: 'warning'
				})
			},
			// 针对单个grid-item的事件
			itemClick(index) {
				// console.log(index);
			},
			getopenid(){
				this.$store.dispatch('getUserProfile')
			},
			gotomap(){
				// 无参数
				this.$u.route({
					url: 'pages/API/choose-location/choose-location',
					type: 'reLaunch'
				});
			},
			gotabs(){
				// 无参数
				this.$u.route({
					url: 'pages/wuye/tabs',
					type: 'reLaunch'
				});
			},
			gotoorder(){
				this.$u.route({
					url: 'pages/center/order',
					type: 'reLaunch'
				})
				
			},
			gotoprdetail(id,name){
				this.$u.route({
					url: 'pages/mall/detail/index',
					params: {
						id: id,
						name: name
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx; 
	}
	.wrap {
		padding: 2rpx;
	}
	.content {
		
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 5rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}
	.grid-top {
		margin-top: 5rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;
		background-color: rgb(235, 228, 228);
	}
	.button-demo {
		margin-top: 80rpx;
	}
	

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240,240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
	.grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: $u-type-info;
}

.badge-icon {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
}
/**const 瀑布流 */
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}
.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
	word-break: break-all;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid $u-type-primary;
	color: $u-type-primary;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 30rpx;
	color: $u-type-error;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}
</style>
